<template>
  <view class="tradeManageMain">
    <u-navbar title="交易管理" :background="{ background: '#fb4535' }" title-color="#fff" back-icon-color="#fff">
      <view class="uNavBarRight" slot="right" @click="$u.route('/pages/trade/trade')">我的交易</view>
    </u-navbar>
    <view class="tradeManageBox">
      <view class="oneBox solid-bottom">
		  <view>
		    自营当月总交易金额
		    <text>{{userStat.month_trade? $tools.format(userStat.month_trade) :'0.00'}}</text>
		  </view>
		  <view>
		    团队当月总交易金额
		    <text>{{groupStat.month_trade? $tools.format(groupStat.month_trade):'0.00' }}</text>
		  </view>
        <view style="margin-top: 20rpx;">
          自营累计金额
          <text>{{userStat.total_trade? $tools.format(userStat.total_trade) :'0.00'}}</text>
        </view>
        <view style="margin-top: 20rpx;">
          团队累计金额
          <text>{{groupStat.total_trade? $tools.format(groupStat.total_trade):'0.00' }}</text>
        </view>
      </view>
      <u-tabs-swiper
        ref="uTabs"
        height="80"
        :list="tabList"
        :current="current"
        @change="tabsChange"
        :is-scroll="false"
        active-color="#fb4535"
        bar-height="8"
      ></u-tabs-swiper>
      <!-- 合作方 -->
      <view class="hzfMain solid-top" v-if="current == 0">
        <view class="right_line solid-right"></view>
        <view class="hzfLeft">
          <view :class="[hzfCurrent == index ? 'solid-bottom active' : 'solid-bottom']" v-for="(item, index) in hzfList" :key="index"
            @tap="hzfItemTap(item.id,item.nick_name,index)">
            <text>{{ item.nick_name }}</text>
          </view>
          <view class="viewMore flex align-center justify-center" @tap="viewMoreTap" v-if="!noMoreHzf">
            <u-icon name="arrow-down" color="#333" size="28"></u-icon>
          </view>
        </view>
        <view class="hzfRight">
          <view class="twoBox">
            <!-- 时间段筛选 -->
            <view
              class="
                filterTimeBox
                solid-bottom
                flex
                align-center
                justify-between
              "
            >
              <view class="filterBtn">
                <picker
                  mode="date"
                  @change="startDateChange"
                  :value="startTime"
                  fields="month"
                  confirm-color="#fb4535"
                >
                  <view class="viewText flex align-center"
                    >{{ startTime
                    }}<u-icon
                      class="uIcon"
                      name="arrow-down-fill"
                      color="#ccc"
                      size="24"
                    ></u-icon
                  ></view>
                </picker>
              </view>
              <view class="line"></view>
              <view class="filterBtn">
                <picker
                  mode="date"
                  @change="endDateChange"
                  :value="endTime"
                  fields="month"
                  confirm-color="#fb4535"
                >
                  <view class="viewText flex align-center"
                    >{{ endTime
                    }}<u-icon
                      class="uIcon"
                      name="arrow-down-fill"
                      color="#ccc"
                      size="24"
                    ></u-icon
                  ></view>
                </picker>
              </view>
            </view>
          </view>
          <!-- 列表 -->
          <view class="monthListBox">
            <view
              class="item solid-bottom"
              v-for="(item, index) in tradeList"
              :key="index"
              @tap="goToDayTrade(item)"
            >
              <text>{{ item.month }}</text>
              <view class="flex align-center justify-between">
                <view
                  >总交易额：<text
                    >{{ item.total == "0" ? "0.00" : $tools.format(item.total) }}元</text
                  ></view
                >
                <u-icon
                  class="uIcon"
                  name="arrow-right"
                  color="#333"
                  size="28"
                ></u-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 签约方 -->
      <view class="qyfMain solid-top" v-if="current == 1">
        <view
          class="topName solid-bottom flex align-center justify-between"
          @tap="qyfShow = true"
        >
          <text>请选择签约方:</text>
          <view class="flex align-center"
            >{{ qyfSelectName
            }}<u-icon name="arrow-right" color="#333" size="28"></u-icon
          ></view>
        </view>
        <view class="qyfBox">
          <view class="twoBox">
            <!-- 时间段筛选 -->
            <view
              class="
                filterTimeBox
                solid-bottom
                flex
                align-center
                justify-between
              "
            >
              <view class="filterBtn">
                <picker
                  mode="date"
                  @change="startDateChange"
                  :value="startTime"
                  fields="month"
                  confirm-color="#fb4535"
                >
                  <view class="viewText flex align-center"
                    >{{ startTime
                    }}<u-icon
                      class="uIcon"
                      name="arrow-down-fill"
                      color="#ccc"
                      size="24"
                    ></u-icon
                  ></view>
                </picker>
              </view>
              <view class="line"></view>
              <view class="filterBtn">
                <picker
                  mode="date"
                  @change="endDateChange"
                  :value="endTime"
                  fields="month"
                  confirm-color="#fb4535"
                >
                  <view class="viewText flex align-center"
                    >{{ endTime
                    }}<u-icon
                      class="uIcon"
                      name="arrow-down-fill"
                      color="#ccc"
                      size="24"
                    ></u-icon
                  ></view>
                </picker>
              </view>
            </view>
          </view>
          <!-- 列表 -->
          <view class="monthListBox">
            <view
              class="item solid-bottom"
              v-for="(item, index) in tradeList"
              :key="index"
              @tap="goToDayTrade(item)"
            >
              <text>{{ item.month }}</text>
              <view class="flex align-center justify-between">
                <view
                  >总交易额：<text>{{
                    item.total == "0" ? "0.00" : $tools.format(item.total)
                  }}</text></view
                >
                <u-icon
                  class="uIcon"
                  name="arrow-right"
                  color="#333"
                  size="28"
                ></u-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 选择签约方 -->
    <u-popup v-model="qyfShow" mode="bottom" height="80%">
      <view class="agentViewMain">
        <view class="agentViewHeader solid-bottom">
          <view
            class="backView flex align-center justify-center"
            @click="qyfShow = false"
          >
            <u-icon name="arrow-left" color="#333" size="32"></u-icon>
          </view>
          <text>请选择签约方</text>
        </view>
        <!-- <view class="agentViewSearch">
          <u-search
            placeholder="请输入手机号或代理商姓名"
            v-model="searchAgent"
            :show-action="false"
            shape="square"
            @change="searchTap('searchAgent')"
          ></u-search>
        </view> -->
        <view
          class="agentViewBox"
          v-if="qyfList.length > 0"
          style="padding-top: 80rpx">
          <view
            class="agentViewItem solid-bottom flex align-center justify-between"
            v-for="(item, index) in qyfList"
            :key="index"
            @click="qyfShowTap(item, index)">
            <view>{{item.nick_name}}({{ item.agent_code }})</view>
            <view class="radioView" :class="qyfCurrent == index ? 'active' : ''"></view>
          </view>
          <view
            class="viewMoreQyf flex align-center justify-center"
            @tap="viewMoreQyfTap"
            v-if="!noMoreQyf"
          >
            <u-icon name="arrow-down" color="#333" size="28"></u-icon>
          </view>
        </view>
        <view class="noMachine flex align-center" v-else>
          <image
            src="../../static/images/noData/zwsh.png"
            mode="widthFix"
          ></image>
          <text>暂无签约方</text>
        </view>
        <!-- <view class="agentBtnView"
          ><button style="width: 100%" type="default" @click="qyfShowTap()">
            确定
          </button></view
        > -->
      </view>
    </u-popup>
    <toast></toast>
  </view>
</template>
<script>
export default {
  data() {
    return {
      tabList: [
        {
          name: "合作方",
        },
        {
          name: "签约方",
        },
      ],
      current: 0,
      //状态
      startTime: "",
      endTime: "",
      cur_page_HJ: 1,
      pageNumber: 20,
      hzfCurrent: 0,
      qyfCurrent: 0,
      noMoreHzf: false,
      noMoreQyf: false,
      user_id: "",
      cur_page_BJ: 1,
      qyfShow: false,
      //数据
      hzfList: [],
      qyfList: [],
      tradeList: [],
      qyfSelectName: "",
      hzfSelectName: "",
	  
	  userStat:{},
	  groupStat:{}
	  
    };
  },
  
  onLoad() {
    this.getYearMonthDay();
    this.myAgentGroupHzf();
    // this.myTradeTotal();
	this.getUserStatIndex();
	this.getGroupStatIndex()
  },
  onPullDownRefresh() {
    this.isLoad=false;
    this.status="loadmore";
    this.noMore=false;

	this.cur_page_HJ = 1;
	this.cur_page_BJ = 1;
	this.hzfCurrent = 0;
	this.hzfList = [];
	// this.tradeList=[];
    this.getYearMonthDay();
	if ( this.current == 0) {
	  this.myAgentGroupHzf();
	} else if ( this.current == 1) {
	  this.myAgentGroupQyf();
	}
  },
  methods: {
    tabsChange(index) {
      this.current = index;
      this.noMore = false;
      this.cur_page_HJ = 1;
      this.cur_page_BJ = 1;
      this.hzfList = [];
      this.qyfList = [];
      if (index == 0) {
		this.hzfCurrent = 0;
        this.myAgentGroupHzf();
      } else if (index == 1) {
        this.myAgentGroupQyf();
      }
    },
    //获取当前年月
    getYearMonthDay() {
      var timestamp = Date.parse(new Date());
      var date = new Date(timestamp);
      //获取年份
      var Y = date.getFullYear();
      //获取月份
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      //获取日期
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      // 设置开始时间
      this.startTime = Y + "-" + "01";
      //设置结束时间
      this.endTime = Y + "-" + M;
	  uni.stopPullDownRefresh();
    },
    // 时间选择变更
    startDateChange(e) {
      this.startTime = e.detail.value.slice(0, 7);
      this.tradeList = [];
      this.monthTradeList();
    },
    endDateChange(e) {
      this.endTime = e.detail.value.slice(0, 7);
      this.tradeList = [];
      this.monthTradeList();
    },
    hzfItemTap(id,hzfName, index) {
      this.user_id = id;
      this.hzfCurrent = index;
      this.hzfSelectName = hzfName;
      this.monthTradeList();
    },
    viewMoreTap() {
      this.cur_page_HJ = ++this.cur_page_HJ;
      this.myAgentGroupHzf();
    },
    viewMoreQyfTap() {
      this.cur_page_BJ = ++this.cur_page_BJ;
      this.myAgentGroupQyf();
    },

    myAgentGroupHzf() {
      this.$u.api
        .myAgentGroup({
          cur_page: this.cur_page_HJ,
          pageNumber: this.pageNumber,
          type: "HJ",
        })
        .then((res) => {
          var datas = res.result.HJ;
          if (this.cur_page_HJ >= 1 && datas.length == this.pageNumber) {
            this.noMoreHzf = false;
          } else {
            this.noMoreHzf = true;
          }
          if (this.cur_page_HJ == 1) {
            datas.unshift({ id: "", nick_name: "我的交易" });
            if (datas.length > 0) {
              this.hzfSelectName = datas[0].nick_name;
              this.user_id = datas[0].id;
            }
            this.monthTradeList();
          }
          this.hzfList = this.hzfList.concat(datas);
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },
    myAgentGroupQyf() {
      this.$u.api
        .myAgentGroup({
          cur_page: this.cur_page_BJ,
          pageNumber: this.pageNumber,
          type: "BJ",
        })
        .then((res) => {
          var datas = res.result.BJ;
          if (this.cur_page_BJ == 1) {
            if (datas.length > 0) {
              this.qyfSelectName = `${datas[0].nick_name}`;
              this.user_id = datas[0].id;
              this.monthTradeList();
            }
          }
          if (this.cur_page_BJ >= 1 && datas.length == this.pageNumber) {
            this.noMoreQyf = false;
          } else {
            this.noMoreQyf = true;
          }
          this.qyfList = this.qyfList.concat(datas);
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },
    monthTradeList() {
      this.$u.api
        .monthTradeList({
          data_type: Number(this.current) + 1,
          user_id: this.user_id,
          begin_month: this.startTime,
          end_month: this.endTime,
        })
        .then((res) => {
          if (res.status == 200) {
            this.tradeList = res.result;
          }
		  this.$loading();
		  uni.stopPullDownRefresh();
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },
    qyfShowTap(item, index) {
      this.qyfCurrent = index;
      this.qyfSelectName = item.nick_name;
      this.user_id = item.id;
      this.qyfShow = !this.qyfShow;
      this.monthTradeList();
    },
    goToDayTrade(item){
       let current = this.current;
       if(current == 0){
         this.$u.route({
           url:'/pages/tradeManage/dayTrade',
           params:{
             data_type:1,
             user_id:this.user_id,
             hzfSelectName:this.hzfSelectName, 
             month:item.month
           }
         })
       }else if(current == 1){
         this.$u.route({
           url:'/pages/tradeManage/dayTrade',
           params:{
             data_type:2,
             user_id:this.user_id,
             qyfSelectName:this.qyfSelectName, 
             month:item.month
           }
         }) 
       }
    },
	
	//获取自营交易统计数据
	getUserStatIndex() {
	  this.$u.api
	    .getUserStatIndex()
	    .then((res) => {
	      if (res.status == 200) {
	        this.userStat = res.result;
	      }
	    })
	    .catch((res) => {
	      if (res.errMsg == "request:fail timeout") {
	        this.$u.toast("请求超时，请重试!");
	      } else if (res.errMsg == "request:fail") {
	        this.$u.toast("请求失败，请重试");
	      } else {
	        this.$u.toast("请求失败，请重试");
	      }
	      this.$loading(false);
	    });
	},
	//获取团队交易统计数据
	getGroupStatIndex() {
	  this.$u.api
	    .getGroupStatIndex()
	    .then((res) => {
	      if (res.status == 200) {
	        this.groupStat = res.result;
	      }
	    })
	    .catch((res) => {
	      if (res.errMsg == "request:fail timeout") {
	        this.$u.toast("请求超时，请重试!");
	      } else if (res.errMsg == "request:fail") {
	        this.$u.toast("请求失败，请重试");
	      } else {
	        this.$u.toast("请求失败，请重试");
	      }
	      this.$loading(false);
	    });
	},
	
	
	
  },
};
</script>
<style lang="scss">
page {
  background: #fff;
}
.uNavBarRight {
  padding-right: 30rpx;
  color: #fff;
}
.tradeManageMain {
  .hzfMain {
    .right_line {
      position: fixed;
      left: 200rpx;
      bottom: 0;
      height: calc(100% - 44px - 340rpx);
	  z-index: 99;
    }
    .hzfLeft {
      width: 200rpx;
      position: fixed;
      left: 0;
      bottom: 0;
      height: calc(100% - 44px - 340rpx);
      overflow-x: hidden;
      > view {
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        position: relative;
        &.active {
          font-weight: bold;
          color: #fb4535;
        }
        &.active::before {
          content: "";
          display: block;
          width: 8rpx;
          height: 40rpx;
          position: absolute;
          left: 0;
          top: 50%;
          margin-top: -20rpx;
          background: #fb4535;
        }
      }
    }
    .hzfRight {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 200rpx;
      height: calc(100% - 44px - 340rpx);
      .monthListBox {
        left: 200rpx;
        width: 550rpx;
        height: calc(100% - 44px - 400rpx);
      }
    }
  }
}
.oneBox {
  padding: 42rpx 10rpx 38rpx;
  overflow: hidden;
  background: #fb4535;
  view {
    text-align: center;
    font-size: 28rpx;
    width: 50%;
    float: left;
    color: #fff;
    text {
      display: block;
      font-size: 34rpx;
      font-family: "numberFont";
      padding-top: 2rpx;
    }
  }
}
.twoBox {
  .filterTimeBox {
    padding: 0 60rpx;
    position: relative;
    height: 80rpx;
	z-index: 99;
	background-color: #fff;
    .filterBtn {
      .viewText {
        .uIcon {
          margin-left: 10rpx;
          position: relative;
          top: 2rpx;
          transform: scale(0.7);
        }
      }
    }
    .line {
      width: 50rpx;
      height: 4rpx;
      background: #ccc;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -2rpx 0 0 -25rpx;
    }
  }
}
.monthListBox {
  position: fixed;
  bottom: 0;

  overflow-x: hidden;
  .item {
    padding: 28rpx 30rpx;
    > text {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
    > view {
      padding-top: 5rpx;
      text {
        font-family: "numberFont";
        font-size: 32rpx;
        letter-spacing: 2rpx;
      }
      .uIcon {
        position: relative;
        top: -2rpx;
      }
    }
  }
}
.qyfMain {
  .topName {
    line-height: 80rpx;
    font-size: 28rpx;
    font-weight: bold;
    text-align: center;
    padding: 0 30rpx;
    view {
      .uIcon {
        margin-left: 10rpx;
      }
    }
  }
  .qyfBox {
    .monthListBox {
      left: 0;
      width: 100%;
      height: calc(100% - 44px - 500rpx);
    }
  }
}
.agentViewMain {
  position: relative;

  .agentViewHeader {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 32rpx;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 9;

    .backView {
      width: 80rpx;
      height: 80rpx;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .agentViewSearch {
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    left: 0;
    top: 80rpx;
    background-color: #fff;
    z-index: 9;
  }

  .agentViewBox {
    padding: 184rpx 30rpx 0;

    .agentViewItem {
      height: 100rpx;
    }
  }

  .agentBtnView {
    padding: 20rpx 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;

    > button {
      background-color: #fb4535;
      font-size: 32rpx;
      color: #fff;
      width: 100%;
      margin: 0;

      &::after {
        border: none;
      }
    }
  }
}
.radioView {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid #ccc;

  &.active {
    border-color: #fb4535;
    background-color: #fb4535;
    position: relative;

    &::before {
      content: "";
      display: block;
      width: 10rpx;
      height: 6rpx;
      background-color: #fff;
      transform: rotate(45deg);
      position: absolute;
      left: 6rpx;
      top: 18rpx;
    }

    &::after {
      content: "";
      display: block;
      width: 22rpx;
      height: 6rpx;
      background-color: #fff;
      transform: rotate(-45deg);
      position: absolute;
      left: 10rpx;
      top: 16rpx;
    }
  }
}
.viewMoreQyf {
  padding: 30rpx 0;
}
</style>